import echarts from 'echarts';
import { survey as SurveyApi } from '../../../../../config/request.js';
import {
    resources,
    excelUtil as ExcelUtil
} from '../../../../../util/';
module.exports = {
    name: 'echarts',
    data() {
        return {
            downloadName: '问卷统计-' + new Date().getTime() + '.xlsx',
            answerDetailVisible: true,
            selectType: [1, 2, 3, 4, 5, 6, 7, 8],
            filterType: [1, 2, 3, 4, 5, 6, 7, 8],
            chartColumn: null,
            chartPie: null,
            answerDetailColumn: null,
            countData: [],
            pieOption: {
                title: {
                    text: '试卷类型分布',
                    subtext: '单位/份',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: []
                },
                series: [{
                    name: '试卷类型分布',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }],
                events: {

                    click: function(e) {
                        alert('111');
                        // window.open('123.aspx?type=' + e.point.type + '&id=' + e.point.tid); //单击每个饼图打开一个页面，同时传递参数，单击了哪个饼图，题                                                                //目id是多少。  
                    }

                },
            },
            columnOption: {
                title: {
                    text: '用户问卷分布柱状图'
                },
                tooltip: {},
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '数量/份',
                    type: 'bar',
                    data: []
                }]
            },
        }
    },
    methods: {
        downloadExl() {
            this.downloadName = '问卷统计-' + new Date().getTime() + '.xlsx';
            var tableData = this.countData;
            var data = ExcelUtil.formatterData(tableData, [], { 'type': '问卷类型', 'count': '答卷人数' }, { 'type': ExcelUtil.formatterEtype });
            ExcelUtil.downloadExl(this.downloadName, data);
        },
        setTableData(data) {
            this.countData = data.typeCount;
        },
        /**
         * 设置表
         */
        setCharts() {
            this.setPieChart();
            this.setColumnChart();
        },
        setPieChart() {
            var legendData = [];
            var seriesData = [];
            this.countData.forEach(function(countData) {
                if (this.filterType.indexOf(countData.type) < 0) {
                    return;
                }
                var typeName = resources.formatterEtype(countData.type);
                legendData.push(typeName);
                seriesData.push({ value: countData.count, name: typeName });
            }, this);
            var option = this.pieOption;
            /*
            title: 
                    text: '试卷类型分布',
                    subtext: '仅供参考',

            series: 
                    name: '试卷类型分布',
            */
            option.legend.data = legendData;
            option.series[0].data = seriesData;
            this.chartPie.setOption(option);

        },
        setColumnChart() {
            var xAxisData = [];
            var seriesData = [];
            this.countData.forEach(function(countData) {
                if (this.filterType.indexOf(countData.type) < 0) {
                    return;
                }
                var typeName = resources.formatterEtype(countData.type);
                xAxisData.push(typeName);
                seriesData.push(countData.count);
            }, this);
            var option = this.columnOption;
            /*
            title: 
                    text: '试卷类型分布',
                    subtext: '仅供参考',

            series: 
                    name: '试卷类型分布',
            */
            option.xAxis.data = xAxisData;
            option.series[0].data = seriesData;
            // console.log(option);
            this.chartColumn.setOption(option);
        },
        updateSelectType() {
            this.filterType = [];
            this.selectType.forEach(data => {
                this.filterType.push(data.type);
            }, this);
            this.setCharts();
        },
        handleSelectionChange(e) {
            this.selectType = e;
        },
        formatterType(type) {
            return resources.formatterEtype(type);
        }

    },
    mounted: function() {
        // var _this = this;
        //基于准备好的dom，初始化echarts实例
        this.chartColumn = echarts.init(document.getElementById('chartColumn'));
        // this.answerDetailColumn = echarts.init(document.getElementById('answerDetailColumn'));
        this.chartPie = echarts.init(document.getElementById('chartPie'));
        // this.chartPie.on('click', function(param) {
        //     console.log(param);
        //     alert('点击了我！');
        // });
        // this.answerDetailColumn.setOption(this.answerDetailOption);

    },
    created: function() {

        SurveyApi.getPaperCount.call(this, data => {
            console.log(data);
            this.setTableData(data);
            this.setCharts();
        })
    }
}